<template>
	<view class="xiche">
		<!-- 店铺详情 -->
		<view class="xiangqing">
			<view class="img">
				<img src="../../../static/lyl-img/zhuanyexiche1/yuan.png" />
			</view>
			<view class="name">{{mendianData.name}}</view>
			<view class="pingfen">
				<view class="xing" v-if="mendianData.pingfen>0">
					<img src="../../../static/lyl-img/zhuanyexiche_slices/五星 拷贝.png" alt="" />
				</view>
				<view class="xing" v-if="mendianData.pingfen>1">
					<img src="../../../static/lyl-img/zhuanyexiche_slices/五星 拷贝.png" />
				</view>
				<view class="xing" v-if="mendianData.pingfen>2">
					<img src="../../../static/lyl-img/zhuanyexiche_slices/五星 拷贝.png" />
				</view>
				<view class="xing" v-if="mendianData.pingfen>3">
					<img src="../../../static/lyl-img/zhuanyexiche_slices/五星 拷贝.png" />
				</view>
				<view class="fen">{{mendianData.pingfen}}分 </view>
				<view class="num">销量:{{mendianData.num}}</view>

			</view>
			<view class="jshao">
				<view class="zhou">营业时间: {{mendianData.zhou}} {{mendianData.shijian}}</view>

				<view class="dizhi">{{mendianData.dizhi}}</view>
				<img class="plane" src="../../../static/lyl-img/zhuanyexiche1/plane@3x.png" alt="" />
			</view>
		</view>
		<!-- 服务项目模块 -->
		<view class="fuwu">
			<view class="tital">服务项目</view>
			<view class="fuwudata" v-for="item in fuwuData" :key="item.id" @click="chooseName(item)">
				<view :class="(fuwu.id==item.id)?'fuwuyuan2':'fuwuyuan' ">
					<view :class="(fuwu.id==item.id)?'inside2':'inside' "></view>
				</view>
				<view class="fuwuname">{{item.name}}</view>
			</view>
			<view style="clear: both;"></view>
			<view class="price">
				<text class="p">￥{{fuwu.price}}</text>
				<text class="p2">￥{{fuwu.oldprice}}</text>
			</view>
			<view class="jieshao">
				{{fuwu.jieshao}}
			</view>
		</view>
		<!-- 评价模块 -->
		<view class="pingjia">
			<view class="pjtitle">服务评价</view>
			<view class="pj" v-for="item in pingjiaData" :key="item.id">
				<view class="pjimg">
					<image src="../../../static/lyl-img/zhuanyexiche1/yuan.png"></image>
				</view>
				<view class="pjcontent">
					<view class="pjname">{{item.name}}</view>
					<view class="pjdata">{{item.time}}</view>
					<view style="clear: both;"></view>
					<view class="xing">
						<img v-if="item.pingfen>0" src="../../../static/lyl-img/zhuanyexiche_slices/五星 拷贝.png" alt="" />
						<img v-if="item.pingfen>1" src="../../../static/lyl-img/zhuanyexiche_slices/五星 拷贝.png" alt="" />
						<img v-if="item.pingfen>2" src="../../../static/lyl-img/zhuanyexiche_slices/五星 拷贝.png" alt="" />
						<img v-if="item.pingfen>3" src="../../../static/lyl-img/zhuanyexiche_slices/五星 拷贝.png" alt="" />
					</view>
					<view style="clear: both;"></view>
					<view class="pinglun">{{item.pinglun}}</view>
				</view>
			</view>
		</view>
		<!--底部客服和立即下单  -->
		<view class="dibu">
			<view></view>
			<image src="../../../static/lyl-img/zhuanyexiche1/客服@3x.png"></image>
			<text class="kefu" @click="toggle">联系客服</text>
			<view class="xiadan" @click="toDingdan1">立即下单</view>
			<view></view>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view @click="call" class="text">18893029302</view>
				<view class="text">复制</view>
				<view @click="close" class="text">取消</view>
			</view>
		</uni-popup>
		<view class="kongbai">zhanwei</view>
	</view>

</template>

<script>
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				// 拨号弹窗
				bohao: false,
				mendianData: {
					id: 0,
					name: '车百事汽车生活馆',
					pingfen: 4,
					num: 556,
					jili: 556,
					img: '../../../static/img/图层 1@3x.png',
					zhou: '周一到周五',
					shijian: '早上8:20-晚上22:00',
					dizhi: '河南省郑州市蓝鸥科技有限公司'
				},
				fuwuData: [{
						id: 1,
						name: '普通洗车',
						price: 35,
						oldprice: 60,
						jieshao: '这里是洗车服务的详情介绍这里是洗车服务的详情介绍这里是洗车服务的详情介绍这里是洗车服务的详情介绍'
					}, {
						id: 2,
						name: '精洗',
						price: 60,
						oldprice: 90,
						jieshao: '这里是洗车服务的详情介绍这里是洗车服务的详情介绍这里是洗车服务的详情介绍这里是洗车服务的详情介绍'
					},
					{
						id: 3,
						name: '内饰清洗',
						price: 10,
						oldprice: 100,
						jieshao: '这里是洗车服务的详情介绍这里是洗车服务的详情介绍这里是洗车服务的详情介绍这里是洗车服务的详情介绍'
					},
					{
						id: 4,
						name: '其他清洗',
						price: 35,
						oldprice: 60,
						jieshao: '这里是洗车服务的详情介绍这里是洗车服务的详情介绍这里是洗车服务的详情介绍这里是洗车服务的详情介绍'
					},
				],
				fuwu: {},
				pingjiaData: [{
					id: 1,
					name: '黄**',
					img: '',
					pingfen: 4,
					time: "2024-10-01",
					pinglun: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐,强烈推荐,强烈推荐'
				}, {
					id: 2,
					name: '黄**',
					img: '',
					pingfen: 4,
					time: "2024-10-01",
					pinglun: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐,强烈推荐,强烈推荐'
				}, {
					id: 3,
					name: '黄**',
					img: '',
					pingfen: 4,
					time: "2024-10-01",
					pinglun: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐,强烈推荐,强烈推荐'
				}, {
					id: 4,
					name: '黄**',
					img: '../../../static/lyl-img/zhuanyexiche1/yuan.png',
					pingfen: 4,
					time: "2024-10-01",
					pinglun: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐,强烈推荐,强烈推荐'
				}, ]


			}
		},
		created() {
			this.fuwu = this.fuwuData[0];
		},
		methods: {
			chooseName(fuwu) {
				this.fuwu = fuwu;
			},
			// 拨打电话
			call() {
				uni.makePhoneCall({
					phoneNumber: '18893029302',
					fail: function() {

					}
				});
			},
			// 客服对话框
			toggle(type) {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close();
			},
			// 点单跳转到订单页面
			toDingdan1() {
				const fuwu = this.fuwu;
				const fuwuDataString = encodeURIComponent(JSON.stringify(fuwu));
				uni.navigateTo({
					url: `/pages/lyl-ZhuanYeXiChe/QRorder/QRorder?fuwuData=${fuwuDataString}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.xiche {
		margin: 0;
		padding: 20rpx 30rpx;
		height: 400rpx;
		background-color: #3687fe;
		background-image: url("../../../static/img/图层 1@3x.png");
	}

	.xiangqing {
		height: 640rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0px -10px 0px 0px rgba(0, 0, 0, 0),
			/*上边阴影  透明*/
			-10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*左边阴影  透明*/
			10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*右边阴影  透明*/
			0px 10px 30px 0px rgba(0, 0, 0, 0.1);
		/*下边阴影 */


	}

	.img img {
		height: 420rpx;
		width: 100%;
		border-radius: 30rpx;
	}

	.name {
		margin-top: 30rpx;
	}


	.pingfen {
		font-size: 20rpx;
		height: 20rpx;
		margin: 16rpx 0;
	}



	.xing {
		float: left;
		margin-right: 6rpx;
	}

	.xing img {
		float: left;
		height: 20rpx;
		width: 20rpx;
	}

	.fen {
		float: left;
		margin: 0 20rpx;
	}

	.num {
		float: left;
	}



	.jshao {
		font-size: 24rpx;
		padding: 10rpx 0;
		height: 140rpx;
	}

	.dizhi {
		margin: 10rpx 0;
		float: left;
	}

	.plane {
		float: left;
		height: 24rpx;
		width: 24rpx;
		margin: 12rpx 20rpx;
	}

	.fuwu {
		margin-top: 20rpx;
		height: 300rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0px -10px 0px 0px rgba(0, 0, 0, 0),
			/*上边阴影  透明*/
			-10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*左边阴影  透明*/
			10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*右边阴影  透明*/
			0px 10px 30px 0px rgba(0, 0, 0, 0.1);
		/*下边阴影 */

	}

	.fuwudata {
		font-size: 26rpx;
		margin: 10rpx;

	}

	.fuwuyuan {
		margin-top: 10rpx;
		float: left;
		height: 16rpx;
		width: 16rpx;
		border: 2rpx solid gray;
		border-radius: 16rpx;
	}

	.fuwuyuan2 {
		margin-top: 10rpx;
		float: left;
		height: 16rpx;
		width: 16rpx;
		border-radius: 16rpx;
		border: 2rpx solid #3687fe;
	}

	.inside {
		height: 10rpx;
		width: 10rpx;
		/* background-color: red; */
		border-radius: 10rpx;
		margin: 2rpx;
	}

	.inside2 {
		height: 10rpx;
		width: 10rpx;
		/* background-color: red; */
		border-radius: 10rpx;
		margin: 2rpx;
		background-color: #3687fe;
	}

	.fuwuname {
		float: left;
		margin: 0 24rpx 0 8rpx;
	}

	.price {
		clear: inline-start;
		margin-top: 20rpx;
		padding: 20rpx 0;
		border-top: 2rpx solid rgba(0, 0, 0, 0.1);
	}

	.p {
		margin-right: 20rpx;
		color: #FF8663;
	}

	.p2 {
		font-size: 20rpx;
		color: grey;
		text-decoration: line-through;
	}

	.jieshao {
		font-size: 24rpx;
	}

	.pingjia {
		margin-top: 20rpx;
		margin-bottom: 120rpx;
		height: auto;
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0px -10px 0px 0px rgba(0, 0, 0, 0),
			/*上边阴影  透明*/
			-10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*左边阴影  透明*/
			10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*右边阴影  透明*/
			0px 10px 30px 0px rgba(0, 0, 0, 0.1);
		/*下边阴影 */
	}

	/* 评价 */
	.pjtitle {
		margin-bottom: 20rpx;
	}

	.pj {
		height: 160rpx;
		margin: 30rpx 0 0 0;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.pjimg {
		float: left;
		height: 100rpx;
		width: 100rpx;
		margin-right: 10rpx;
	}

	.pjimg image {
		border-radius: 50%;
		height: 100rpx;
		width: 100rpx;
	}

	.xing {
		float: left;
		margin-right: 6rpx;
	}

	.pjcontent {
		margin-left: 12rpx;
		width: 500rpx;
		float: left;
	}

	.pjname {
		float: left;
		width: 300rpx;
		font-size: 26rpx;
	}

	.pjdata {
		font-size: 20rpx;
		float: right;
	}

	.xing {
		margin: 10rpx 0;
	}

	.xing img {
		height: 20rpx;
		width: 20rpx;
	}

	.pinglun {
		font-size: 22rpx;
	}

	.dibu {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100rpx;
		background-color: white;
		box-shadow: 0px -10px 0px 0px rgba(0, 0, 0, 0),
			/*上边阴影  透明*/
			-10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*左边阴影  透明*/
			10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*右边阴影  透明*/
			0px 10px 30px 0px rgba(0, 0, 0, 0.1);
		/*下边阴影 */
	}

	.dibu image {
		position: fixed;
		bottom: 20rpx;
		left: 20rpx;
		height: 40rpx;
		width: 40rpx;
		float: left;
	}

	.kefu {
		position: fixed;
		bottom: 20rpx;
		left: 68rpx;
	}

	.xiadan {
		width: 240rpx;
		height: 60rpx;
		padding-top: 10rpx;
		text-align: center;
		color: white;
		background-color: #3687fe;
		position: fixed;
		bottom: 10rpx;
		right: 20rpx;
		float: right;
		border-radius: 35rpx;
	}

	.popup-content {
		/* @include flex; */
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 130px;
		background-color: #fff;
	}

	.text {
		font-size: 35rpx;
		text-align: center;
		padding: 25rpx;
		border-bottom: 1px solid gainsboro;
	}

	.text:nth-child(3) {
		border: 0;
	}
</style>